<!--
*@Author: QWP
*@Description: 当前风险等级
*@Date: 2024-11-01 15:10:37
-->
<template>
  <!-- 风险等级 -->
  <u-card v-if="Object.keys(MaxLevelOptions).length != 0" 
    :style="`background: ${MaxLevelOptions.list.bgcolor};`" 
    class="u-warn-level-card f-h-100"
    v-bind="$attrs">
    <a-row class="f-h-100"
      @click="showEdit = true">
      <a-col :span="24">
        <div style="color: #FFFFFF;line-height: 22px;">
          {{ MaxLevelOptions.warnTime ? dayjs(MaxLevelOptions.warnTime).format('YYYY-MM-DD') : '' }}
        </div>
      </a-col>
      <a-col :span="6" style="padding-top: 1em;">
        <a-row>
          <img :src="MaxLevelOptions.list.url" alt="GIF动画" style="width: 5em; height: auto;" />
        </a-row>
      </a-col>
      <a-col :span="18">
        <a-row>
          <a-col :span="24" style="color: #FFFFFF;line-height: 22px;font-size: 26px;margin-top: 10px;">{{
            MaxLevelOptions.list.label }}</a-col>
          <a-col :span="24">
            <div class="desc" style="color: #FFFFFF;line-height: 22px;font-size: 14px;margin-top: 18px;">
              {{ MaxLevelOptions.content }}
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </u-card>

  <!-- 应急登记详情窗口 -->
  <Edit v-model:open="showEdit" 
    wrap-class-name="full-modal" 
    :keyid="MaxLevelOptions['keyid']" 
    @close="showEdit = false"/>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, watch } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { urlFile } from '@/util/common';
import dayjs, { Dayjs } from 'dayjs';
import { warnEventBus } from '@/util/eventBus'
import Edit from '@/views/index/index/components/emergency/edit.vue'
import * as emergencyWarningApi from '@/service/emergencyWarning/index'

const router = useRouter()
const route = useRoute()

const emits = defineEmits(['back'])

const showEdit = ref<boolean>(false)

// gif卡片背景色
const LevelArr = [
  {
    label: 'I级应急响应',
    bgcolor: '#F5222D',
    url: urlFile('gif/1.gif'),
    value: '1'
  },
  {
    label: 'II级应急响应',
    bgcolor: '#FA8C16',
    url: urlFile('gif/2.gif'),
    value: '2'
  },
  {
    label: 'III级应急响应',
    bgcolor: '#F3CC09',
    url: urlFile('gif/3.gif'),
    value: '3'
  },
  {
    label: 'IV级应急响应',
    bgcolor: '#1890FF',
    url: urlFile('gif/4.gif'),
    value: '4'
  }
]

// 应急预警获取当日最大等级
let MaxLevelOptions = ref<{}>({})
const getMaxLevel = async () => {
  const res = await emergencyWarningApi.singleQuery({ date: dayjs().format('YYYY-MM-DD') })
  if (res.code == 0) {
    MaxLevelOptions.value = res.data[0] || {}
    emits('back', Object.keys(MaxLevelOptions.value).length > 0)
    if(Object.keys(MaxLevelOptions.value).length > 0) {
      let info = LevelArr.find(i => i.value == MaxLevelOptions.value['warnLevel']);
      MaxLevelOptions.value.list = info || {}
    }
  }
}

onMounted(() => {
  getMaxLevel()

  warnEventBus.on('getWrnLevel', () => getMaxLevel())
})

watch(() => route.path, (nval, oval) => {
  if(['/TransitIndex/Index', '/TransitIndex/EmergencyResourceMap'].includes(nval)) {
    getMaxLevel()
  }  
})

</script>

<style lang='scss' scoped>
.u-warn-level-card {
  
}
</style>